<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#target {
  transition-property: --transitioning-property;
  transition-duration: 1s;
  transition-delay: -0.5s;
  transition-timing-function: linear;
  --transitioning-property: 100;
}
</style>
<div id="target">target</div>
<script>
setup(() => {
  for (let name of ['--transitioning-property', '--test']) {
    CSS.registerProperty({
      name,
      syntax: '<number>',
      initialValue: '0',
      inherits: false,
    });
  }
});

function assert_computed_value_equals(property, expectedValue, description) {
    assert_equals(getComputedStyle(target).getPropertyValue(property), expectedValue, description);
  }

test(() => {
  assert_computed_value_equals('--test', '0',
      '--test at initial value');
  assert_computed_value_equals('--transitioning-property', '100',
      '--transitioning-property at initial value');

  let animation = target.animate({
    '--test': ['50', 'var(--transitioning-property)'],
  }, {
    duration: 100,
    fill: 'forwards',
  });

  animation.currentTime = 0;
  assert_computed_value_equals('--test', '50',
      '--test at 0% with no transition');
  animation.currentTime = 50;
  assert_computed_value_equals('--test', '75',
      '--test at 50% with no transition');
  animation.currentTime = 100;
  assert_computed_value_equals('--test', '100',
      '--test at 100% with no transition');

  target.style.setProperty('--transitioning-property', '200');
  // Transition jumps to half way through due to negative transition-delay.
  assert_computed_value_equals('--transitioning-property', '150',
      '--transitioning-property at initial transitioning value');

  animation.currentTime = 0;
  assert_computed_value_equals('--test', '50',
      '--test at 0% with transition');
  animation.currentTime = 50;
  assert_computed_value_equals('--test', '100',
      '--test at 50% with transition');
  animation.currentTime = 100;
  assert_computed_value_equals('--test', '150',
      '--test at 100% with transition');
}, 'Animated registered custom properties can var() reference transitioning registered custom properties.');
</script>
